<template>
  <div class="todos-wrapper">
    <header>
      <span
        :class="{ active: isLight, display: tempList.length === 0 }"
        @click="cancelAllSelect"
      ></span>
      <input
        type="text"
        placeholder="what needs to be done?"
        @keyup.enter="edit"
        :value="val"
      />
    </header>
    <ul class="list">
      <li v-for="(d, i) in list" :key="d.val" @dblclick="dblclick(i)">
        <div
          class="check"
          :style="{ opacity: d.isdisabled ? '1' : '0' }"
          @click="selectCheck(i)"
        >
          <span :class="{ selectCheck: d.status }"></span>
        </div>
        <input
          type="text"
          :disabled="d.isdisabled"
          :value="d.val"
          :class="{
            cancelChecked: !d.status,
            checked: d.status,
            editContent: !d.isdisabled,
          }"
          @keyup.enter="reEdit(i, $event)"
        />
        <button
          @click="list.splice(i, 1); setData()"
          :style="{ opacity: d.isdisabled ? '1' : '0' }"
        >
          X
        </button>
      </li>
    </ul>
    <footer v-show="tempList.length !== 0">
      <span class="notSelect">{{ notSelect }} item left</span>
      <ul>
        <li
          :class="{ hoverBorderColor: currentIndex === i }"
          v-for="(d, i) in tab"
          :key="d"
          @click="onTab(i)"
        >
          {{ d }}
        </li>
      </ul>
      <span class="clear" @click="clear">Clear completed</span>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      s: false,
      list: [], // 数据
      tempList: [],
      val: "", // 输入框里面的内容
      notSelectNum: 0, // 没有选中的内容
      tab: ["All", "Active", "Completed"],
      currentIndex: 0, //选项卡边框高亮的下标
      selectedList: [],

      flagStatus: null, // 临时保存双击输入框可以输入，不管当前项有没有选中，输入的时候文字都没有中划线

      isAllSelected: false
    };
  },
  methods: {
    // 输入框按下
    edit(e) {
      let value = e.target.value;
      if (!value) return;
      this.list.push({ status: false, val: value, isdisabled: true });
      this.tempList = this.list;
      this.setData();
    },
    onCheck(i) {
      this.list[i].status = !this.list[i].status;
      this.tempList = this.list;
    },
    selectCheck(i) {
      this.list[i].status = !this.list[i].status;
      this.tempList = this.list;
    },
    onTab(i) {
      if (i === 0) {
        this.list = this.tempList;
      } else if (i === 1) {
        console.log(i);
        this.list = this.tempList.filter((item) => !item.status);
      } else {
        this.list = this.tempList.filter((item) => item.status);
      }
      this.currentIndex = i;
    },
    // 删除选中的内容
    clear() {
      this.list = this.tempList.filter((item) => !item.status);
      this.tempList = this.list;
      this.setData();
    },
    // 取消全选
    cancelAllSelect() {
      this.isAllSelected = !this.isAllSelected;
      this.list.map((item) => (item.status = this.isAllSelected));

      this.setData();
    },
    dblclick(i) {
      console.log(1);
      this.list[i].isdisabled = false;
      this.flagStatus = this.list[i].status;
      this.list[i].status = false;
    },
    //
    reEdit(i, ev) {
      this.list[i].isdisabled = true;
      this.list[i].val = ev.target.value;

      this.list[i].status = this.flagStatus;
      this.flagStatus = null;
      this.setData();
    },
    // 存入缓存公用方法
    setData() {
      localStorage.setItem("data", JSON.stringify(this.list));
    },
  },
  computed: {
    // 上面输入框左侧箭头是否高亮
    isLight() {
      return this.list.every((item) => item.status) && this.list.length !== 0;
    },
    // 没有选中内容的条数
    notSelect() {
      return this.tempList.filter((item) => !item.status).length;
    }
  },
  mounted() {
    this.list = JSON.parse(localStorage.getItem("data")) || [];
    console.log(this.list);
    this.tempList = this.list;
    this.isAllSelected = this.list.some(i => i.status);
  },
};
</script>

<style lang="sass">
.todos-wrapper
  margin: 0 auto
  // width: 34.375rem
  width: 550px
  box-shadow: 0 0 3px 0 #ccc
  header
    width: 100%
    height: 65px
    box-shadow: inset 0 -2px 1px rgb(0 0 0 / 3%)
    display: flex
    align-items: center
    span
      width: 46px
      opacity: .3
      height: 65px
      line-height: 65px
      &.display
        opacity: 0
      &.active
        opacity: 1
      &::after
        content: "❯"
        font-size: 22px
        transform: rotate(90deg)
        display: block
    input
      width: 474px
      height: 33px
      margin-left: 20px
      font-size: 24px
      font-style: italic
      outline: 0
      color: #ddd
      margin: 0
      &::-webkit-input-placeholder
        color: #ddd
  .list
    width: 100%
    li
      height: 58px
      border-bottom: 1px solid #ededed
      display: flex
      justify-content: space-between
      align-items: center
      position: relative

      &:last-child
        border-bottom: none
      &:hover button
        display: block
      .check
        width: 40px
        height: 40px
        & span
          display: block
          width: 24px
          height: 24px
          // background: #000
          margin: 8px auto 0
          border-radius: 50%
          position: relative
          border: 1px solid #ddd
          &::before
            width: 16px
            height: 8px
            content: ""
            position: absolute
            top: 45%
            left: 50%
            border-left: 1px solid transparent
            border-bottom: 1px solid transparent
            transform-origin: center center
            transform: translate(-50%, -50%) rotate(-45deg)
          &.selectCheck
            border-color: green
            &::before
              border-color: green
      .check+input
        width: 480px
        height: 100%
        border: 1px solid transparent
        box-sizing: border-box
        background: transparent
        outline: 0
        font-size: 24px
        color: #ddd
        transition: .6s
        padding-left: 10px
        &.editContent
          border: 1px solid rgba(0, 0, 0, .5)
          box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, .5) inset
        &.checked
          color: #ddd
          text-decoration: line-through
        &.cancelChecked
          color: #333
          text-decoration: none
        // text-decoration: line-through
      button
        position: absolute
        top: 50%
        right: 30px
        transform: translateY(-50%)
        background: transparent
        display: none
        cursor: pointer
  footer
    padding: 10px 15px
    border-top: 1px solid #e6e6e6
    display: flex
    justify-content: space-between
    align-items: center
    color: #ddd
    & .clear
      cursor: pointer
    & ul
      display: flex
      & li
        border: 1px solid transparent
        padding: 0 5px
        border-radius: 3px
        margin-right: 8px
        cursor: pointer
        &:hover
          border-color: rgba(175, 47, 47, 0.2)
        &.hoverBorderColor
          border-color: rgba(175, 47, 47, 0.2)
</style>
